<template>
  <div>
    <div class="toubudaohang flex ai-c">
      <el-radio-group v-model="tabPosition">
        <el-radio-button @click.native="$router.push('/layout/pointall')" label="pointall">积分统计</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/pointchange')" label="pointchange">积分变动记录
        </el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/operationLog')" label="operationLog">操作日志
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- 中间内容 -->
    <div class="point-all-count">
      <!-- 积分统计右边内容 -->
      <div class="point-right">
        <div class="point-top flex ai-c">
          <div>
            <el-input clearable v-model="content" placeholder="请输入用户名、姓名搜索" class="point-input"></el-input>
          </div>
          <div>
            <el-date-picker v-model="valuetime" align="right" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div>
            <el-button @click="admindatachangepage"></el-button>
          </div>
        </div>
        <div class="form-list-count">
          <template>
            <el-table stripe :data="tableData" style="width: 100%" ref="multipleTable" tooltip-effect="dark"
              @selection-change="handleSelectionChange">
              <!-- <el-table-column type="selection" width="55"> </el-table-column> -->

              <el-table-column prop="account" label="用户名" width="150"></el-table-column>
              <el-table-column prop="name" label="姓名" width="150"></el-table-column>
              <el-table-column prop="scoreBefore" label="原本积分" width="150">
              </el-table-column>
              <el-table-column prop="scoreChange" label="变动" width="150">
                <template slot-scope="scope">
                  <span v-if="scope.row.scoreChange > 0" style="color: #46db5f">{{ scope.row.scoreChange }}</span>
                  <span v-else style="color: #f06565">{{
                      scope.row.scoreChange
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="reason" label="变动原因" width="350">
              </el-table-column>

              <el-table-column prop="scoreBalance" label="当前积分" width="150"></el-table-column>
              <el-table-column prop="createTime" label="时间"></el-table-column>
            </el-table>
          </template>
        </div>
        <!-- 分页 -->
        <div class="page-count flex jc-c">
          <div class="page-numBer">
            <div class="block">
              <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                :current-page="pageNo" @current-change="currentchange">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <!-- 按人员统计 -->
      <div class="point-right" v-show="rightContent === 1">
        <!-- <h2>按人员统计内容</h2> -->
        <div class="point-top">
          <input type="text" class="point-input" placeholder="请输入内容用户名、姓名搜索" />
          <el-time-select v-model="valueone" :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30',
          }" placeholder="选择时间">
          </el-time-select>
          <el-button type="primary">查询</el-button>
          <el-button type="primary">导出</el-button>
        </div>

        <!-- 分页 -->
        <div class="page">
          <div class="page-num">
            <span>共15条</span>
          </div>

          <div class="page-select">
            <el-select @change="admindatachangepage" v-model="pageSize" clearable placeholder="5条/页">
              <el-option v-for="item in pageNums" :key="item.Numones" :label="item.numBers" :value="item.Numones">
              </el-option>
            </el-select>
          </div>
          <div class="page-numBer">
            <div class="block">
              <el-pagination background layout="prev, pager, next" :total="50">
              </el-pagination>
            </div>
          </div>
          <!-- <div class="go-page">
            <span>跳转</span>
            <input type="text" />
            <span>页</span>
          </div> -->
        </div>
      </div>
    </div>
    <el-dialog class="new-add" width="30%">
      <div class="head-input-add">
        <el-col :span="6">
          <el-input v-model="userInfo.name" placeholder="请输入分类名称"></el-input>
        </el-col>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserclassdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="
          addUserclassdialogVisible = false;
        addUserclass();
        ">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 无视频 -->
    <el-dialog>
      <span slot="footer" class="dialog-footer"> > </span>
    </el-dialog>
    <!-- 有视频 -->
    <el-dialog>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>

<script>
import { admindatachangepage } from "@/api/index";
export default {
  data() {
    return {
      //   积分统计
      pointMain: [
        {
          name: "积分统计",
        },
        {
          name: "积分变动记录",
        },
      ],
      //   分组统计
      groupingPoint: [
        {
          name: "按分组统计",
        },
        {
          name: "按人员统计",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],

      pickerOptions: {
        disabledDate(time) {
          // return time.getTime() > Date.now();
        },
      },
      value1: "",
      value2: "",
      userInfo: {
        name: "",
        age: "",
        loaction: "",
        position: "",
        major: "",
      },
      tableData: [],
      //   分页
      pageNums: [
        {
          Numones: 5,
          numBers: "5条/页",
        },
        {
          Numones: 10,
          numBers: "10条/页",
        },
        {
          Numones: 15,
          numBers: "15条/页",
        },
      ],
      input: "",
      value: "",
      // 时间选择器
      valueone: "",
      countPoint: 0,
      isPoint: 0,
      rightContent: 0,
      pointAll: 0,
      content: "",
      endTime: "",
      pageNo: 1,
      pageSize: 5,
      startTime: "",
      total: 0,
      valuetime: "",
      tabPosition: "pointchange",
    };
  },

  methods: {
    currentchange(val) {
      this.pageNo = val;
      this.admindatachangepage();
    },
    admindatachangepage() {
      admindatachangepage({
        content: this.content,
        endTime: this.valuetime ? this.valuetime[1] : "",
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.valuetime ? this.valuetime[0] : "",
      }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    this.admindatachangepage();
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f2f2f2;");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>

<style lang="scss" scoped>
// 积分变动记录
.point-all-count {
  margin: 24px auto;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
}

.point-left {
  width: 267px;

  margin-top: 15px;

  p {
    margin-left: 20px;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
  }
}

.point-list {
  width: 267px;
  margin-top: 20px;
  height: 613px;
  border-right: 1px solid #f2f2f2;
  text-align: center;
}

.point-list>div {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  cursor: pointer;
  color: #7f7f7f;
  margin-bottom: 15px;
}

.point-list .countBg {
  color: #000000;
  font-weight: bold;
  background-color: #f2f2f2;
}

.point-right {
  // width: 1100px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  // padding-top: 40px;
}

.point-right table {
  width: 1000px;
}

.point-top {
  button {
    width: 61px;
    height: 40px;
    background-size: 19px 20px;
    background-repeat: no-repeat;
    border: none;
    background-position: center;
    text-align: center;
    // border-radius: 5px;
    background-color: #ff5478;
    background-image: url("../assets/btnsearch.png");

    align-items: center;
  }

  .point-input {
    width: 227px;
    outline: none;
    margin-right: 20px;
    padding-left: 14px;
    border-radius: 3px;
    height: 40px;


  }

  table {
    width: 0;
  }
}

.point-right .el-table_1_column_8 .el-table__cell {
  width: 200px !important;
}

.el-select {
  margin-right: 26px;
}

.el-table th.el-table__cell>.cell {
  width: 180px !important;
}

.el-table .el-table__cell {
  text-align: center !important;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  text-align: center !important;
}

.el-table td.el-table__cell div {
  width: 150px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  margin-right: 26px;
}

.el-button--primary {
  margin-right: 15px;
}

.form-list-count {
  // width: 1235px;
  margin-top: 38px;
  // border: 1px solid red;
  // border-right:1px solid red;
}

.el-table th.el-table__cell>.cell {
  text-align: center !important;
}

// 分页
.page {
  width: 853px;
  margin-bottom: 40px;
  display: flex;
  margin-left: 15px;
  justify-content: flex-start;
  margin-top: 40px;
}

.page-num {
  width: 127px;
  // margin-right: 15px;
}

span {
  font-size: 14px;
}

.page-select {
  margin-right: 15px;
  // width: 120px;
  margin-top: -5px;

  input {
    height: 21px;
  }
}

.go-page {
  width: 500px;
  margin-top: 5px;
  margin-left: 12px;

  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }

  input {
    width: 35px;
    outline: none;
    border-radius: 3px;
    height: 25px;
    border: 1px solid #dce6ea;
  }
}

.page-count {
  margin-bottom: 40px;
  margin-top: 40px;
}

.el-input__icon {
  line-height: 21px !important;
}

.el-table .cell {
  text-align: center !important;
}
</style>
<style scoped lang="scss">
.toubudaohang {
  width: 100%;
  height: 84px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding-left: 30px;
  box-sizing: border-box;
}
</style>